<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/index.css"/>
		<script src="../jquery/jquery-3.5.1.js"></script>
		
	</head>
	<body>
		<div class="bg1"></div>
		<div class="gyl">
		        用户信息管理
		        
		    <div class="gy2" >打造国内最具规模的、最专业的用户信息服务平台 </div>
		</div>
		<div class="bg">
			<div class="wel">用户登录</div>			
	        <div class="user">
	       	    <div style="">手机名</div>
	       	    <input  type="text" name="username" id="phone"  placeholder="157..." />
	        </div>
	        <div class="password" >
	        	<div >验证码</div>
	       	    <input class="" type="password" name="password" id="phoneCode"  placeholder="......" />
	        </div>
	        <div class="rem" >
	       	  <input type="checkbox" name="" id="" value="" />
	        	 <div id="reb">
	        	 	记住密码
	        	 </div>
	        </div>
	        <div class="fg" >
	       	    <div style="font-size: 11px;margin-top: 11px;">
	       	    	<a style="font-size: 11px;" href="#">忘记密码？</a>
	       	    </div>
	        </div>
			<input class="btn" type="button" id="loginButton" name="登录" value="登录"/>
	        <input class="btn" type="button" id="sendButton" name="发送" value="发送" style="margin-top: 50px"/>
		</div>
	</body>
<script>

	$("#sendButton").click(function () {
		$.ajax({
			url:"/sendCode",         // 请求路径
			type:"post",            // 请求的方式，不区分大小写
			data: {                // 传递参数的key-value严格区分大小写
				phone: $("#phone").val()
			},
			success:function(response){
				alert(response.msg);
				console.log("数据: " + response);
			},
			error:function(response){
				console.log("出错" + response);
			}
		});
	});

	$("#loginButton").click(function () {
		$.ajax({
			url:"/phoneLogin",         // 请求路径
			type:"post",            // 请求的方式，不区分大小写
			data: {                // 传递参数的key-value严格区分大小写
				phone: $("#phone").val(),
				phoneCode: $("#phoneCode").val()
			},
			success:function(response){
				alert(response.msg);
				if(response.code === 200) {
					localStorage.setItem("user", JSON.stringify(response.data));   // item中只能存放字符串，所以如果存放的是一个js对象，那么默认是把js对象的外部信息内容存放起来了
					window.location.href = "../index.html";
				}
				console.log("数据: " + response);
			},
			error:function(response){
				console.log("出错" + response);
			}
		});
	});
</script>
</html>
